
<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <a-input type="text" disabled v-model:value="current.component" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">字段标识</div>
      <div class="w-3/4">
        <a-input type="text" placeholder="用于$('')查询"  v-model:value.trim="current.selector" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">功能描述</div>
      <div class="w-3/4">
        <a-input type="text" v-model:value="current.describe" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">标题</div>
      <div class="w-3/4">
        <a-input type="text" v-model:value="current.componentProps.title" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">文本内容</div>
      <div class="w-3/4 text-center">
        <a-button type="link" @click="wangEditorVisible = true"
          >富文本编辑</a-button
        >
      </div>
    </div>

    <a-modal v-model:visible="wangEditorVisible" width="70%"  :footer="null" title="编写文本">
      <wang-editor
        :contentHtml="current.componentProps.value"
        v-on:getWangEditorValue="getWangEditorValue"
      ></wang-editor>
    </a-modal>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from "vue";
import type { Component } from "@/components/low-code/core/component";
import wangEditor from "@/components/low-code/page-designer/components/wang-editor/index.vue";

export default defineComponent({
  name: "htmlSetting",
  props: ["current"],
  components: { wangEditor },
  setup(props) {
    const component = props.current as Component;
    let lowCode = component.getLowCodeInstance();

    const wangEditorVisible = ref(false);
    const getWangEditorValue = (value: any) => {
      (component.componentProps as { value: string }).value = value;
      console.log(
        "🚀 ~ file: index.vue ~ line 47 ~ getWangEditorValue ~ value",
        value
      );
    };

    return { lowCode, wangEditorVisible, getWangEditorValue };
  },
});
</script>

<style  scoped>
</style>
